<!-- child1组件 -->
<template>
  <div id="child1">
    <p>{{ userInfo.name }}</p>
    <button @click="changeUserInfo('李四')">child1修改姓名</button>
  </div>
</template>

<script>
export default {
  computed: {
    userInfo() {
      return this.$store.state.userInfo
    },
  },
  methods: {
    // 点击修改姓名时调用
    changeUserInfo(newName) {
      this.userInfo.name = newName
      this.$store.commit('changeUserInfo', newName)
    },
  },
}
</script>

<style lang="scss" scoped></style>
